<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const dailyText = ref('')
const processedText = ref('')

const characters = [
  { id: 1, name: '旅行者', element: '无' },
  { id: 2, name: '派蒙', element: '无' },
  { id: 3, name: '琴', element: '风' },
  { id: 4, name: '迪卢克', element: '火' },
  { id: 5, name: '温迪', element: '风' }
]

const selectCharacter = (character) => {
  userStore.setCharacter(character)
}

const processText = () => {
  // 这里应该调用AI接口处理文本
  processedText.value = `[${userStore.currentCharacter.name}的日常]: ${dailyText.value}`
}
</script>

<template>
  <div class="min-h-screen bg-gradient-to-b from-blue-900 to-purple-900 text-white">
    <div class="container mx-auto px-4 py-8">
      <h1 class="text-4xl font-bold text-center mb-8">NPC角色扮演</h1>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- 角色选择区 -->
        <div class="bg-gray-800 bg-opacity-70 rounded-lg p-6">
          <h2 class="text-2xl font-bold mb-4">选择你的角色</h2>
          <div class="grid grid-cols-2 gap-4">
            <div 
              v-for="character in characters" 
              :key="character.id"
              @click="selectCharacter(character)"
              class="bg-gray-700 hover:bg-gray-600 rounded-lg p-4 cursor-pointer transition"
            >
              <h3 class="text-xl font-semibold">{{ character.name }}</h3>
              <p class="text-gray-300">元素: {{ character.element }}</p>
            </div>
          </div>
        </div>

        <!-- 文本编辑区 -->
        <div class="bg-gray-800 bg-opacity-70 rounded-lg p-6">
          <h2 class="text-2xl font-bold mb-4">撰写日常</h2>
          <textarea 
            v-model="dailyText"
            class="w-full h-40 bg-gray-700 text-white p-4 rounded-lg mb-4"
            placeholder="写下你今天在提瓦特的经历..."
          ></textarea>
          <button 
            @click="processText"
            class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded transition"
          >
            发布到提瓦特
          </button>
        </div>
      </div>

      <!-- 处理后的文本展示 -->
      <div v-if="processedText" class="mt-8 bg-gray-800 bg-opacity-70 rounded-lg p-6">
        <h2 class="text-2xl font-bold mb-4">你的故事</h2>
        <div class="bg-gray-700 p-4 rounded-lg">
          <p class="whitespace-pre-line">{{ processedText }}</p>
        </div>
      </div>
    </div>
  </div>
</template>